<script setup>
import {IconRefresh} from "@arco-design/web-vue/es/icon";
import {onMounted, ref} from 'vue'
import apiAll from "@/api/apiAll.js";
import {outSize} from '@/utils/common.js'
import * as echarts from 'echarts';

const data = ref({})
const loading = ref(false)
const memoryChart = ref(null)
const memoryRef = ref()

const loadData = () => {
  loading.value = true
  apiAll.commonApi.consoleInfo().then(res => {
    data.value = res.data
    data.value.useMemory = res.data.totalMemory - res.data.freeMemory
    setMemoryChart()
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 200)
  })
}

const setMemoryChart = () => {
  memoryChart.value.setOption({
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: 'JVM内存使用情况',
      left: 'center',
      top: '50px'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        // 1、图表 当鼠标悬浮的时候展示文字选项
        tooltip: {
          show: true,
          trigger: 'item',
          axisPointer: {
            type: 'pie'
          },
          valueFormatter: (value, dataIndex) => {
            if (dataIndex === 0) {
              return outSize(value) + ' (' + ((value / data.value.totalMemory) * 100).toFixed(2) + '%)'
            } else if (dataIndex === 1) {
              return outSize(value) + ' (' + ((value / data.value.totalMemory) * 100).toFixed(2) + '%)'
            }
            console.log(dataIndex + ' = ' + value)
            return value
          }
        },
        data: [
          {
            value: data.value.freeMemory,
            name: '可用内存'
          },
          {
            value: data.value.useMemory,
            name: '已用内存'
          }
        ]
      }
    ]
  });
}

onMounted(() => {
  memoryChart.value = echarts.init(memoryRef.value);
  loadData()
})

</script>

<template>
  <a-spin :loading="loading" tip="加载中...">
    <div class="flex-column">
      <div class="flex-row" style="margin-bottom: 20px">
        <a-button @click="loadData" type="outline">
          <icon-refresh/>
          刷新数据
        </a-button>
      </div>
      <div class="flex-row">
        <a-card title="JVM 情况">
          <table>
            <colgroup>
              <col style="width: 80px">
              <col style="width: 100px">
            </colgroup>
            <tr>
              <td>最大内存</td>
              <td>{{ outSize(data.maxMemory) }}</td>
            </tr>
            <tr>
              <td>JVM内存</td>
              <td>{{ outSize(data.totalMemory) }}</td>
            </tr>
            <tr>
              <td>已用内存</td>
              <td>{{ outSize(data.useMemory) }}</td>
            </tr>
            <tr>
              <td>可用内存</td>
              <td>{{ outSize(data.freeMemory) }}</td>
            </tr>
          </table>
        </a-card>
        <a-card title="系统情况">
          <table>
            <colgroup>
              <col style="width: 100px">
              <col style="width: 100px">
            </colgroup>
            <tr>
              <td>pid</td>
              <td>{{ data.pid }}</td>
            </tr>
            <tr>
              <td>终端线程池</td>
              <td>{{ data.terminal }}</td>
            </tr>
            <tr>
              <td>路由网关</td>
              <td>{{ data.router }}</td>
            </tr>
          </table>
        </a-card>
        <a-card :title="item.port+' - 网关情况'" v-for="item in data.gateway">
          <table>
            <colgroup>
              <col style="width: 80px">
              <col style="width: 120px">
            </colgroup>
            <tr>
              <td>状态</td>
              <td>{{ item.enable ? '启用' : '停用' }}</td>
            </tr>
            <tr>
              <td>监听端口</td>
              <td>{{ item.port }}</td>
            </tr>
            <tr>
              <td>引用SSL</td>
              <td>{{ item.ssl ? data.sslAddress : '未引用' }}</td>
            </tr>
            <tr>
              <td>最大转发</td>
              <td>{{ outSize(item.maxContentLength) }}</td>
            </tr>
          </table>
        </a-card>
      </div>
      <div class="flex-row">
        <div ref="memoryRef" style="width: 600px;height: 600px"></div>
      </div>
    </div>
  </a-spin>
</template>

<style scoped>
.arco-card {
  margin-right: 20px;
}
</style>